{% extends 'base_templates/base.html' %}

{% load static %}

{% block title %}家电之选-首页{% endblock %}

{% block banners %}
    <div class="has-background-white">
        {% include 'base_templates/banners.html' %}
    </div>
{% endblock %}

{% block container %}
    <div class="container mt-4 mb-4">
        {% for goods_type in goods_types %}
            <div class="is-flex is-align-items-center is-justify-content-space-between mb-2">
                <div class="">
                    <h1 class=" has-text-weight-semibold is-size-5">{{ goods_type.name }}</h1>
                </div>
                <div class="">
                    <a href="{% url 'goods:list' goods_type.logo 1 %}">更多>></a>
                </div>
            </div>
            <div class="columns is-multiline is-mobile">
                <div class="column is-4-fullhd is-6-tablet is-12-mobile">
                    <figure class="image is-4by3">
                        <img src="{{ goods_type.image.url }}" alt="{{ goods_type.name }}" srcset="">
                    </figure>
                </div>
                {% for goods in goods_type.goods %}
                    <div class="column is-2-fullhd is-3-tablet is-6-mobile">
                        <div class="is-flex is-flex-direction-column is-justify-content-space-between has-background-white"
                             style="height:100%">
                            <figure class="image is-1by1">
                                <a href="{% url 'goods:detail' goods.goods_sku.id %}"><img src="{{ goods.image }}" alt="{{ goods.goods_sku.name}}"></a>
                            </figure>
                            <div class="is-flex-grow-1 is-flex is-flex-direction-column is-justify-content-center">
                                <p class="has-text-justified spu-title pl-3 pr-3">
                                    <a href="{% url 'goods:detail' goods.goods_sku.id %}" class="has-text-black-ter">{{ goods.goods_sku.name }}</a>
                                </p>
                            </div>
                            <div class="pl-2 pr-2 pb-2">
                                <div class="is-flex is-align-items-center is-justify-content-space-between">
                                    <span class="is-size-5 has-text-danger-dark">¥{{ goods.price }}</span>
                                </div>
                                <div class="is-flex is-align-items-center is-justify-content-space-between">
                                    <span class="is-size-7 has-text-grey-light">{{ goods.sales }}人付款</span>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% endfor %}
    </div>
{% endblock %}